<template>
  <div>
    人员列表
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>人员列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 人员列表 -->
    <el-card style="width: 40%">
      <el-input placeholder="请输入搜索内容" v-model="searchuser">
        <el-button
          slot="append"
          icon="el-icon-search"
          :plain="true"
          @click="searchUser()"
        ></el-button>
      </el-input>
    </el-card>
    <div class="content" style="margin-top: 5px">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="name" label="姓名" width="1100">
        </el-table-column>
        <el-table-column type="selection" width="35"></el-table-column>
        <el-table-column prop="travel" label="(未勾选为出差状态)" width="130">
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button @click="toggleSelection()" type="warning" class="select"
          >取消选择</el-button
        >
        <el-button type="success" class="select" @click="confirmSelect()"
          >确认所选</el-button
        >
      </div>
    </div>
    <div class="luckdraw" v-if="isShow">
      <LuckDraw :multipleSelection="this.multipleSelection"></LuckDraw>
      <el-button type="danger" class="select outbutton" @click="Show()"
        >退出抽取</el-button
      >
    </div>
  </div>
</template>
<script>
import LuckDraw from "../../comm/LuckDraw";
export default {
  components: {
    LuckDraw,
  },
  data() {
    return {
      tableData: [], //存储所有人员
      multipleSelection: [], //存储所有勾选的人员
      isShow: false, //是否显示抽取滚动框
      isluckdraw: false, //是否执行抽取操作
      searchuser: " ", //搜索框内容
      info: "出差", //人员状态
    };
  },
  mounted() {
    this.getUser();
  },
  methods: {
    toggleSelection(rows) {
      //多选框的状态切换
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      //获取所有勾选人员
      this.multipleSelection = val;
    },
    confirmSelect() {
      //提交选择验证
      if (this.multipleSelection == "") {
        this.$message.warning("您还未做任何选择，请选择！！");
      } else {
        this.$confirm("您确定您的选择吗？, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            console.log(1);
            this.isShow = true;
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消选择",
            });
          });
      }
    },
    getUser() {
      //获取所有人员
      this.$http
        .get("user")
        .then((res) => {
          if (res.data.flag == 200) {
            if (res.data) {
              for (let i = 0; i < res.data.suers.length; i++) {
                let a = {};
                a.name = res.data.suers[i].name;
                this.tableData.push(a);
              }
            }
          } else {
            this.$XModal.danger("数据请求错误");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    Show() {
      //是否显示抽取模块组件
      this.isShow = !this.isShow;
    },
    searchUser() {
      //搜索判断人员状态
      let flag = 1;
      console.log(this.multipleSelection);
      for (let i = 0; i < this.multipleSelection.length; i++) {
        if (" " + this.multipleSelection[i].name == `${this.searchuser}`) {
          this.info = "未出差";
          flag = 2;
          break;
        }
      }
      if (flag == 1) {
        this.info = "出差";
      }
      if (this.multipleSelection == "") {
        this.info = "出差";
      }
      if (this.searchuser >= 0) {
        this.$message.warning("当前输入有误，请重新输入！！");
      } else {
        this.$message({
          showClose: true,
          message: `当前查询的人员姓名为:${this.searchuser}  当前状态为：${this.info}`,
        });
      }
    },
  },
};
</script>

<style lang="less" scope>
.el-breadcrumb {
  margin: 15px 0;
  font-size: 17px;
}
.el-table__body-wrapper {
  height: 300px;
  overflow: auto !important;
}
.select {
  border-radius: 8px !important;
}
.luckdraw {
  position: absolute;
  top: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  margin: 0;
  font-family: "Roboto", sans-serif;
  background-color: #333;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}
.outbutton {
  position: absolute !important;
  z-index: 999 !important;
  margin-top: 13% !important;
  margin-left: 10% !important;
}
.el-checkbox:last-of-type {
  margin-bottom: -1px;
}
</style>